<template>
  <div>
      <p>您输入的地址有误，请检查后重试！</p>
      <!-- 声明式导航-路由的内置组件：router-link,适用于简单的逻辑 -->
      <router-link tag="button" :to="url">返回首页</router-link>
      <br>
      <router-link to="/side">side</router-link>
      <br>
      <router-link to="/content">content</router-link>
      <hr>
      <button @click="changePage('index')">返回首页</button><br>
      <button @click="changePage('side')">side</button><br>
      <button @click="changePage('content')">content</button><br>
  </div>
</template>

<script>
export default {
    data() {
        return {
            url: '/index'
        }
    },
    methods: {
        changePage(url) {
            // 很多逻辑代码。。。。
            // 编程式导航，适用于复杂的逻辑 localtion.href = 'xxxxx'
            this.$router.push('/'+url);
        }
    }
}
</script>

<style>

</style>